<template>
    <el-dialog class="comn_dialog" :title="dialogTitle" :visible.sync="visible" :width="popupWidth" :top="popupTop"
        :close-on-click-modal="false" @close="Cancel">
        <slot>
            <div></div>
        </slot>

        <span v-if="!$slots.footer" slot="footer" class="dialog-footer">
            <el-button type="primary" @click="Save">确定</el-button>
            <el-button @click="Cancel">取 消</el-button>
        </span>

        <div v-else class="my-footer">
            <slot name="footer" />
        </div>
    </el-dialog>
</template>
<script>
export default {
    props: {
        dialogTitle: {
            type: String,
            default: "标题"
        },
        centerDialogVisible: {
            type: Boolean,
            default() {
                return false;
            }
        },
        popupWidth: {
            type: String,
            default() {
                return "430px";
            }
        },
        popupTop: {
            type: String,
            default() {
                return "15vh";
            }
        }
    },
    computed: {
        visible: {
            get() {
                return this.centerDialogVisible;
            },
            set(val) {
                this.$emit("updateVisible", val);
            }
        }
    },
    methods: {
        Cancel() {
            this.$emit("resetPopupData");
        },
        Save() {
            this.$emit("submitPopupData");
        }
    }
};
</script>
<!-- <style lang="scss"> -->
<style scoped lang="scss">
.comn_dialog {
    
    .el-dialog__header {
        padding: 8px 0px 3px 8px;
        border-bottom: 1px solid #e7e6e6;
        box-shadow: 0px 4px 4px -4px #d1d0d0;
    }

    .el-dialog__title {
        font-size: 16px;
        letter-spacing: 1px;
        color: #464646;
        font-weight: bolder;
    }

    .el-dialog__footer {
        padding: 0px 20px 20px 0px;
    }

    .el-dialog__headerbtn {
        position: static; // 兼容IE11 ,取消原有的position定位
    }

    .el-dialog__close {
        color: #ccc;
        font-size: 20px;
        font-weight: bolder;
        position: absolute;
        top: 8px;
        right: 8px;

        &::after {
            content: '';
            border: 2px solid #ccc;
            width: 20px;
            height: 20px;
            border-radius: 25px;
            position: absolute;
            right: -2px;
            top: -3px;
        }
    }

    .el-dialog__body {
        padding: 20px;
    }

    .my-footer {
        text-align: right;
        box-sizing: border-box;
    }

}
</style>